

<template>
  <view class="Mall4j container">
    <view class="pro-order">
      <view class="title">
        <!-- (0:待支付 1:待结算 2:已结算 -1:订单失效) -->
        <text data-state="0" :class="state==0?'on':''" @tap="onStsTap">{{ i18n.all }}</text>
        <text data-state="1" :class="state==1?'on':''" @tap="onStsTap">{{ i18n.unsettlement }}</text>
        <text data-state="2" :class="state==2?'on':''" @tap="onStsTap">{{ i18n.settled }}</text>
        <text data-state="-1" :class="state==-1?'on':''" @tap="onStsTap">{{ i18n.expired1 }}</text>
      </view>

      <!-- 推广订单列表 -->
      <view class="main">
        <view v-for="(item, id) in records" :key="id" class="prod-item">
          <view class="order-num">
            <text>{{ i18n.orderNumber }}：{{ item.orderNumber }}</text>
            <view class="order-state">
              <!-- <text :class="'order-sts  ' + (item.status==2?'red':'') + '  ' + ((item.status==1)?'gray':'')">{{item.status==1?i18n.settled:(item.status==2?i18n.unsettlement:'')}}</text> -->
              <text v-if="item.state==0" class="colorTop">{{ i18n.toBePaid }}</text>
              <text v-if="item.state==1" class="colorTop">{{ i18n.unsettlement }}</text>
              <text v-if="item.state==2" class="colorTop">{{ i18n.settled }}</text>
              <text v-if="item.state==-1" class="colorTop">{{ i18n.expired }}</text>
            </view>
          </view>
          <!-- 一个订单单个商品的显示 -->
          <block v-if="item.orderItemDtoList.length===1">

            <block v-for="(prod, index) in item.orderItemDtoList" :key="index">
              <view>
                <view class="item-cont">
                  <view class="prod-pic">
                    <image v-if="prod.pic" :src="prod.pic" />
                    <image v-else src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/def.png" mode="aspectFit" />
                  </view>
                  <view class="prod-info">
                    <view class="prodname">{{ prod.prodName }}</view>
                    <view class="prod-info-cont">{{ prod.skuName||'' }}</view>
                    <view class="price-nums">
                      <text class="prodprice">
                        <text class="symbol">￥</text>
                        <!-- <text class='big-num'>{{wxs.parsePrice(35)[0]}}</text>
                      <text class='small-num'>.{{wxs.parsePrice(00)[1]}}</text>-->
                        <text class="big-num">{{ prod.price }}</text>
                      </text>
                      <text class="prodcount">x{{ prod.prodCount }}</text>
                    </view>
                  </view>
                </view>
              </view>
            </block>
          </block>
          <!-- 一个订单多个商品时的显示 -->
          <block v-else>
            <view class="item-cont" :data-ordernum="item.orderNumber" @tap="toOrderDetailPage">
              <scroll-view scroll-x="true" scroll-left="0" scroll-with-animation="false" class="categories">
                <block v-for="(prod, index) in item.orderItemDtoList" :key="index">
                  <view class="prod-pic">
                    <image v-if="prod.pic" :src="prod.pic" />
                    <image v-else src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/def.png" mode="aspectFit" />
                  </view>
                </block>
              </scroll-view>
            </view>
          </block>
          <view class="total-num">
            <view>
              <text class="prodcount">{{ i18n.inTotal }}{{ item.productNums }}{{ i18n.items }}</text>
              <view class="prodprice">{{ i18n.total }}：<text class="symbol">￥</text>
                <text class="big-num">{{ wxs.toPrice(item.actualTotal) }}</text>
                <!-- <text class='big-num'>{{wxs.parsePrice(35)[0]}}</text> -->
                <!-- <text class='small-num'>.{{wxs.parsePrice(00)[1]}}</text> -->
              </view>
            </view>
            <view class="prodprice">{{ i18n.commission }}：<text class="symbol color">￥</text>
              <!-- <text class='big-num color'>{{wxs.parsePrice(35)[0]}}</text>
              <text class='small-num color'>.{{wxs.parsePrice(00)[1]}}</text> -->
              <text class="big-num color">{{ item.incomeAmount }}</text>
            </view>

          </view>
        </view>
      </view>

      <!-- 空 -->
      <view v-if="records.length==0" class="empty">{{ emptyMsg }}</view>
      <!-- 加载到底~ -->
      <view v-if="totalPage>1" class="loading">{{ loadingMsg }}</view>

      <!-- end 推广订单列表 -->
    </view>

  </view>
</template>

<script module="wxs" lang="wxs" src="../../wxs/number.wxs"></script>

<script>
// pages/promotion-order/promotion-order.js
const http = require("../../utils/http.js")

export default {
  data () {
    return {
      sts: 0,
      state: '',
      records: [],
      loadingMsg: "",
      emptyMsg: "",
      totalPage: 1,
      pageNum: 1,
      current: 0,
      pages: 0
    };
  },

  components: {},
  props: {},

  computed: {
    i18n () {
      return this.$t('index')
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) { },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    //头部导航标题
    uni.setNavigationBarTitle({
      title: this.i18n.myPromotion
    });

    this.loadingMsg = this.i18n.loading,

      this.loadPageData(1);
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () { },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    if (this.pageNum < this.totalPage) {
      this.loadPageData(this.pageNum + 1);
    }
  },
  methods: {
    /**
     * 点击切换事件 0:全部
     */
    onStsTap: function (e) {
      let state = e.currentTarget.dataset.state;
      this.setData({
        state: state,
        current: 1,
        pages: 0
      });
      this.loadPageData(1);
    },

    /**
     * 通过状态加载分销订单列表
     */
    loadPageData: function (pageNum) {
      let ths = this;
      var state = ths.state;

      if (state === "0") {
        state = '';
      }

      var params = {
        url: "/p/distribution/income/myPromotionOrder",
        method: "GET",
        data: {
          shopId: 1,
          current: pageNum,
          size: 20,
          state: state
        },
        callBack: res => {
          var records = [];
          if (res.current == 1) {
            records = res.records;
          } else {
            records = this.records.concat(res.records);
          }
          var loadingMsg = this.loadingMsg;
          if (pageNum == res.pages) {
            loadingMsg = ths.i18n.noMore;
          }

          console.log(res);
          this.setData({
            records: records,
            totalPage: res.pages,
            pageNum: pageNum,
            loadingMsg: loadingMsg,
            emptyMsg: ths.i18n.noRecordsFound
          });
        }
      };
      http.request(params);
    }
  }
};
</script>
<style>
@import "./promotion-order.css";
</style>
